<template>
  <div class="dashboard-view">
    <el-form
      ref="sysLogForm"
      :model="form"
      label-width="100px"
      label-suffix=":"
      inline
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="主机">
            <!-- 选择框内容 multiple-->
            <el-select
              v-model="form.computer_name"
              placeholder="请选择主机ip"
              style="width: 220px"
              @change="bindChangeSelect"
            >
              <el-option label="172.19.5.201" value="172.19.5.201"></el-option>
              <el-option label="172.19.5.202" value="172.19.5.202"></el-option>
              <el-option label="172.19.5.206" value="172.19.5.206"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="page-indicator">
      <div
        v-for="el in computerList.filter((item) => item.isVisible)"
        :key="el.id"
      >
        <iframe
          :key="el.title"
          :src="el.displayType == 0 ? el.LineChart : el.CircleChart"
          width="100%"
          height="100%"
          frameborder="0"
        ></iframe>
      </div>
    </div>
  </div>
</template>

<script name="DashboardView" setup>
import { indicatorList } from "./indicator.js";
import { getIndicatorList } from "@/api/report.js";

import { ref, reactive, onMounted } from "vue";

const computerList = ref([]);
const form = reactive({
  computer_name: "172.19.5.201",
});

const bindChangeSelect = (ip) => {
  form.computer_name = ip;
  addIndicator()
}

// 获取最新地址
function getLatestUrl() {
  const ip = form.computer_name || '172.19.5.201'
  const baseUrl = `http://172.19.5.201:3100/d-solo/ohXIJVcHk/aiops?orgId=1&var-origin_prometheus=&var-job=node%20exporter&var-hostname=All&var-node=${ip}:9101&var-device=All&var-interval=2m&var-maxmount=%2F&var-show_hostname=${ip}&var-total=3&theme=light&panelId=`
  return baseUrl
}

// 获取指标列表
function getList() {
  getIndicatorList({
    pageNo: 1,
    pageSize: 100,
  }).then((response) => {
    computerList.value = response.data.list;
    addIndicator();
  });
}

// 将indicatorList中的linechart和circlechart添加到computerList中
function addIndicator() {
  computerList.value.forEach((item) => {
    indicatorList.forEach((indicator) => {
      if (item.indicatorName == indicator.title) {
        item.LineChart = getLatestUrl() + indicator.LineChart;
        item.CircleChart = getLatestUrl() + indicator.CircleChart;
      }
    });
  });
  console.log(computerList.value)
}

onMounted(async () => {
  await getList();
});
</script>

<style lang="scss" scoped>
.dashboard-view{
  box-sizing: border-box;
  padding: 20px;
  background: #fff;
  height: calc(100vh - 60px);
  overflow: scroll;
}
.page-indicator {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px;
  > div {
    width: 49%;
    height: 300px;
    margin-bottom: 20px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
  }
}
</style>